
//header 吸顶
.logo {
    height: 1.5rem;
    margin: 0 auto;
}

/* sku 通用选中状态样式 */
.option[aria-pressed="true"] {
    border: 1px solid red; /* 边框 */
    // box-shadow: 0 0 5px red; /* 轻微阴影 */
    // border-radius: 5px; /* 圆角效果 */
}
.luv-sku-color-img-min-width {
    max-width: 50px; /* 最小宽度 */
}
.luv-browse-history-min-width {
    min-width: 150px; /* 最小宽度 */
}

// modal 弹窗
// .modal {
//     display: flex !important;
//     align-items: flex-end; /* 从底部推出 */
// }
.modal-dialog-scrollable .modal-content {
    max-height: 80vh; /* 设置最大高度 */
    align-self:flex-end; 
}
.modal .modal-dialog {
    margin: 0; /* 移除默认的上下边距 */
    width: 100%; /* 占满宽度 */
    max-width: none; /* 移除最大宽度限制 */
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translateY(100%); /* 初始状态：完全隐藏在底部 */
}

.modal.show .modal-dialog {
    transform: translateY(0); /* 显示时：移动到可视区域 */
}


// ---------------------- swiper 
/* Swiper 容器样式 */
.swiper {
    width: 100%;
    // height: 300px; /* 固定高度 */
    // overflow: hidden;
}
/* Swiper 滑块样式 */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* 图片样式 */
.swiper-slide img {
    width: 100%; /* 宽度填满容器 */
    height: 100%; /* 高度填满容器 */
    object-fit: cover; /* 保持宽高比并裁剪多余部分 */
}
/* 分页器样式 */
.swiper-pagination {
    // position: absolute;
    
    bottom: 10px; /* 距离底部的距离 */
    left: 10px; /* 距离左边的距离 */
    /* 使用逻辑属性 */
    inset-block-end: 10px;
    inset-inline-start: 10px;

    width: auto; /* 宽度自适应 */
    background-color: rgba(128, 128, 128, 0.7); /* 灰色背景，带透明度 */
    padding: 5px 10px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    color: #fff; /* 字体颜色 */

}
/* 分页器中的数字样式 */
// .swiper-pagination-current,
// .swiper-pagination-total {
//     font-weight: bold; /* 加粗显示 */
// }
// ----------------------
